<template>
  <div>
    <div id="containerCesium"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import { onMounted } from 'vue'
import { flightData, createAnnularSector, addSectorGrid } from './utils/common'
onMounted(() => {
  // Cesium.Ion.defaultAccessToken = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1OGM2NzgyNC1jMTE0LTQ4ZGYtYjMyZS03ZTMxNWU2NjU1ZTYiLCJpZCI6Mjc2NTI1LCJpYXQiOjE3Mzk3NjA4NTN9.3IyHPjbQRxi28OTo9qZBVQ86gHXlkCBl5CSAXCVa7J4`
  const viewer = new Cesium.Viewer("containerCesium", {
    // 禁用所有默认底图（如 Bing 地图）
    baseLayerPicker: false,
    imageryProvider: false,
    sceneMode: Cesium.SceneMode.SCENE2D, // 强制为 2D 模式
    baseLayerPicker: false, // 隐藏默认底图选择器
    sceneModePicker: false, // 隐藏模式切换按钮
    navigationHelpButton: false, // 导航帮助按钮（右上角）
    geocoder: false,           // 搜索框（右上角）
    homeButton: false,          // 返回初始视角按钮（右上角）
    // 修改背景颜色为透明或黑色
    // skyBox: false,          // 隐藏天空盒（星空背景）
    // skyAtmosphere: false,  // 隐藏大气效果
    // // 设置地球底色为透明
    // globe: new Cesium.Globe(Cesium.Ellipsoid.WGS84, {
    //   baseColor: Cesium.Color.TRANSPARENT,
    // }),

  });

  // 加载本地瓦片（需提前配置离线数据源）
  const offlineProvider = new Cesium.UrlTemplateImageryProvider({
    url: "http://192.168.15.250:9999/tiles/{z}/{y}/{x}.png",
    minimumLevel: 0, // 最小层级
    maximumLevel: 12, // 最大层级
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    // 其他配置...
  });
  viewer.imageryLayers.addImageryProvider(offlineProvider);

  // 可选：设置初始视角（例如中国范围）
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.40, 39.90, 5e5),
    orientation: {
      heading: 0,
      pitch: -Cesium.Math.PI / 2, // 二维模式必须设置俯角 -90 度
      roll: 0
    }
  });
  // 限制地图范围到中国
  // const chinaExtent = Cesium.Rectangle.fromDegrees(73.66, 18.16, 135.05, 53.55);
  // viewer.scene.postRender.addEventListener(() => {
  //   const viewRect = viewer.camera.computeViewRectangle();
  //   if (!Cesium.Rectangle.contains(chinaExtent, viewRect)) {
  //     viewer.camera.flyTo({ destination: chinaExtent, duration: 0.5 });
  //   }
  // });
  //移除默认的全球底图，避免显示其他区域
  viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT; // 地球表面透明
  viewer.scene.backgroundColor = Cesium.Color.WHITE;       // 背景设为白色
  // viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

  // 定义扇形参数
  const centerLonLat = [111.7493, 40.8429]; // 中心点经纬度 [经度, 纬度]
  const innerRadius = 800000.0; // 内半径（米）
  const outerRadius = 3000000.0; // 外半径（米）
  const startAngle = -45; // 起始角度（度）东
  const endAngle = 45; // 结束角度（度）

  // // 定义扇形参数
  // const center = Cesium.Cartesian3.fromDegrees(); // 中心点经纬度
  // const innerRadius = res?.data?.radarConfig?.radiusMin * 1000; // 内半径（米）
  // const outerRadius = res?.data?.radarConfig?.radiusMax * 1000; // 外半径（米）
  // const startAngle = res?.data?.radarConfig?.angleMin; // 起始角度（度）
  // const endAngle = res?.data?.radarConfig?.angelMax; // 结束角度（度）

  // 添加扇环
  viewer.entities.add({
    polygon: {
      hierarchy: new Cesium.PolygonHierarchy(createAnnularSector(centerLonLat, innerRadius, outerRadius, startAngle, endAngle)),
      material: Cesium.Color.YELLOW.withAlpha(0.3),
      outline: false,
      outlineColor: Cesium.Color.TRANSPARENT,
      height: 0 // 贴合地表
    },
    // description: `123123`
  });
  // 添加圆心标记
  // 添加圆心标记（带实体描述）
  viewer.entities.add({
    name: '发射站',
    position: Cesium.Cartesian3.fromDegrees(centerLonLat[0], centerLonLat[1]),
    point: {
      pixelSize: 20,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2
    },
    // 实体描述（支持 HTML）
    //   description: `
    //   <div style="max-width: 300px;">
    //     <h4 style="margin: 0; color: #2c3e50;">扇环圆心参数</h4>
    //     <hr style="margin: 5px 0;">
    //     <table>
    //       <tr>
    //         <td><strong>经度</strong></td>
    //         <td>${centerLonLat[0].toFixed(5)}°</td>
    //       </tr>
    //       <tr>
    //         <td><strong>纬度</strong></td>
    //         <td>${centerLonLat[1].toFixed(5)}°</td>
    //       </tr>
    //       <tr>
    //         <td><strong>内半径</strong></td>
    //         <td>${(innerRadius / 1000).toFixed(1)} km</td>
    //       </tr>
    //       <tr>
    //         <td><strong>外半径</strong></td>
    //         <td>${(outerRadius / 1000).toFixed(1)} km</td>
    //       </tr>
    //       <tr>
    //         <td><strong>角度范围</strong></td>
    //         <td>${startAngle}° ~ ${endAngle}°</td>
    //       </tr>
    //     </table>
    //   </div>
    // `
  });

  //接收站
  viewer.entities.add({
    name: '接收站',
    position: Cesium.Cartesian3.fromDegrees(centerLonLat[0] + 1, centerLonLat[1] + 1),
    point: {
      pixelSize: 20,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2
    },
    label: {
      text: "接收站",        // 显示文字
      font: "14px sans-serif", // 字体
      fillColor: Cesium.Color.WHITE, // 文字颜色
      backgroundColor: Cesium.Color.BLACK.withAlpha(0.5), // 背景色
      pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量（Y轴方向）
      showBackground: true, // 显示背景
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000000) // 可视范围控制文字显示（0-100公里）
    }
    // 实体描述（支持 HTML）
    //   description: `
    //   <div style="max-width: 300px;">
    //     <h4 style="margin: 0; color: #2c3e50;">扇环圆心参数</h4>
    //     <hr style="margin: 5px 0;">
    //     <table>
    //       <tr>
    //         <td><strong>经度</strong></td>
    //         <td>${centerLonLat[0].toFixed(5)}°</td>
    //       </tr>
    //       <tr>
    //         <td><strong>纬度</strong></td>
    //         <td>${centerLonLat[1].toFixed(5)}°</td>
    //       </tr>
    //       <tr>
    //         <td><strong>内半径</strong></td>
    //         <td>${(innerRadius / 1000).toFixed(1)} km</td>
    //       </tr>
    //       <tr>
    //         <td><strong>外半径</strong></td>
    //         <td>${(outerRadius / 1000).toFixed(1)} km</td>
    //       </tr>
    //       <tr>
    //         <td><strong>角度范围</strong></td>
    //         <td>${startAngle}° ~ ${endAngle}°</td>
    //       </tr>
    //     </table>
    //   </div>
    // `
  });

  // 调用函数添加网格
  addSectorGrid(viewer, centerLonLat, innerRadius, outerRadius, startAngle, endAngle);
  //开始绘制飞机航线展示
  function createFlightEntity(planeId, data) {
    // 1. 创建航迹线（动态线段）
    const positions = data.positions.map(p =>
      Cesium.Cartesian3.fromDegrees(p.lon, p.lat, p.alt)
    );
    const trailEntity = viewer.entities.add({
      name: `${planeId}_trail`,
      polyline: {
        positions: positions,
        width: 2,
        material: Cesium.Color.fromCssColorString(data.linePlaneColor) // 轨迹颜色
      }
    });

    // 2. 创建飞机模型（带动态位置和方向）
    const positionProperty = new Cesium.SampledPositionProperty();
    data.positions.forEach(p => {
      const time = Cesium.JulianDate.fromIso8601(p.time);
      const position = Cesium.Cartesian3.fromDegrees(p.lon, p.lat, p.alt);
      positionProperty.addSample(time, position); // 绑定时间-位置
    });

    const planeEntity = viewer.entities.add({
      name: planeId,
      position: positionProperty,
      orientation: new Cesium.VelocityOrientationProperty(positionProperty), // 自动计算航向
      model: {
        uri: data.modelUri,
        minimumPixelSize: 64, // 模型最小显示尺寸
        maximumScale: 400,
        silhouetteColor: Cesium.Color.WHITE
      },
      path: { // 显示预测路径
        resolution: 1,
        material: new Cesium.PolylineGlowMaterialProperty({
          glowPower: 0.3,
          color: Cesium.Color.YELLOW
        }),
        width: 3
      }
    });

    return { trailEntity, planeEntity };
  }
  // 为所有飞机创建实体
  Object.keys(flightData).forEach(planeId => {
    createFlightEntity(planeId, flightData[planeId]);
  });
  // 设置时间范围（根据轨迹数据中的最早和最晚时间）
  const startTime = Cesium.JulianDate.fromIso8601("2023-10-01T00:00:00Z");
  const endTime = Cesium.JulianDate.fromIso8601("2023-10-01T00:20:00Z");
  viewer.clock.startTime = startTime;
  viewer.clock.stopTime = endTime;
  viewer.clock.currentTime = startTime;
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环播放
  viewer.timeline.zoomTo(startTime, endTime);

  // 添加播放/暂停按钮
  const toolbar = document.createElement('div');
  toolbar.style.position = 'absolute';
  toolbar.style.top = '10px';
  toolbar.style.left = '10px';
  toolbar.style.backgroundColor = 'white';
  toolbar.style.padding = '5px';
  document.body.appendChild(toolbar);

  const playButton = document.createElement('button');
  playButton.innerHTML = '播放/暂停';
  playButton.onclick = () => viewer.clock.shouldAnimate = !viewer.clock.shouldAnimate;
  toolbar.appendChild(playButton);
});
</script>
<style scoped></style>
